<template>
  <view class="container">
    <view class="bg-context">
      <view class="bg-box">
        <view class="daka">
          <view class="daka-tip-box">
            <!-- <text class="daka-tip">今日未打卡</text>
            <view class="ok-daka">今日1000小伙伴打开完成</view> -->
          </view>
        </view>

        <view class="daka-jl-box">
          <!-- <view class="daka-jl-item">
            连续
            <text>10</text>
            天
          </view>
          <view class="daka-jl-item">
            本月
            <text>10</text>
            天
          </view>
          <view class="daka-jl-item">
            累计
            <text>10</text>
            天
          </view> -->
        </view>
      </view>

      <view class="today-lx-box">
        <view class="today-lx">
          <view class="shangan">
            <view class="shangan-title">上岸</view>
            <view class="shangan-text"
              >傲不可长，欲不可纵，乐不可极，志不可满。</view
            >
          </view>

          <view class="go-topic-box">
            <view class="go-item">
              <button open-type="contact" class="kefu function-but">
                <uni-icons
                  type="headphones"
                  size="25"
                  color="#fbc02d"
                ></uni-icons>
                <view class="text"> 客服</view>
              </button>
            </view>
            <view class="go-item">
              <button class="go-share function-but" open-type="share">
                <uni-icons
                  type="redo-filled"
                  size="25"
                  color="#2f77f1"
                ></uni-icons>
                <view class="text">分享好友</view>
              </button>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="item-context">
      <tools></tools>
    </view>
  </view>
</template>

<script setup>
import { nextTick, ref, onMounted } from 'vue'
import tools from './tools.vue'

const navHeight = ref(45)

nextTick(() => {
  console.log(uni.getMenuButtonBoundingClientRect())
  navHeight.value = uni.getMenuButtonBoundingClientRect().top
})

const login = () => {
  uni.login({
    success(res1) {
      console.log(res1)
      uni.getUserInfo({
        success(res2) {
          console.log(res2, 'res2')
          const userInfo = res2.userInfo
          uni.request({
            method: 'POST',
            url: 'http://127.0.0.1:3002/wx/login',
            data: {
              code: res1.code,
              nickname: userInfo.nickName,
              avatarUrl: userInfo.avatarUrl,
              gender: userInfo.gender,
              country: userInfo.country,
              province: userInfo.province,
              city: userInfo.city,
              language: '',
              mobile: '',
              phone: '',
            },
            success(res3) {
              console.log(res3.data)
            },
          })
        },
      })
    },
  })
}

onMounted(() => {})
</script>

<style scoped lang="scss">
.function-but {
  border: none;
  /* 清除所有边框 */
  padding: 0;
  /* 清除内边距 */
  margin: 0;
  /* 清除外边距 */
  color: inherit;
  /* 继承文字颜色 */
  text-align: left;
  /* 文字对齐方式 */
  box-shadow: none;
  /* 移除阴影 */
  line-height: normal;
  /* 设置正常行高 */
  font-size: 16px;
  /* 可调整字体大小 */
  outline: none;
  /* 移除焦点轮廓线 */
}

.function-but::after {
  border: none;
}

.kefu {
  width: 300rpx;
  height: 70rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

<style lang="scss" scoped>
$lr-padding: 30rpx;

.container {
  width: 100%;
  height: 100vh;

  .bg-context {
    width: 100%;
    height: 720rpx;
    position: relative;

    .bg-box {
      width: 100%;
      height: 550rpx;
      background: linear-gradient(0deg, #71ddff 0%, #2979ff 100%);
      box-sizing: border-box;
      padding: 0 $lr-padding;
      overflow: auto;

      z-index: -1;

      .daka {
        width: 100%;
        margin-top: 100px;

        .daka-tip {
          font-size: 1.5rem;
          font-weight: 700;
          color: #fff;
        }

        .ok-daka {
          color: rgba($color: #fff, $alpha: 0.5);
          margin-top: 10rpx;
        }
      }

      .daka-jl-box {
        width: 100%;
        height: 100rpx;
        display: flex;
        margin-top: 50rpx;
        align-items: center;
        justify-content: space-between;

        .daka-jl-item {
          width: 175rpx;
          font-size: 0.9rem;
          color: rgba($color: #fff, $alpha: 0.6);

          > text {
            color: #fff;
            font-size: 1.25rem;
          }
        }
      }
    }

    .today-lx-box {
      width: 100vw;
      height: 300rpx;
      box-sizing: border-box;
      padding: 0 $lr-padding;
      position: absolute;
      z-index: 99;
      top: 475rpx;

      .today-lx {
        width: 100%;
        height: auto;
        background-color: #fff;
        border-radius: 50rpx;
        box-sizing: border-box;
        padding: $lr-padding;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .shangan {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: start;

          .shangan-title {
            width: 100rpx;
            height: 50rpx;
            background-color: #0e5299;
            border-radius: 10rpx;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
          }

          .shangan-text {
            margin-left: 20rpx;
            color: #222222;
            font-weight: 700;
          }
        }

        .today-lx-title-box {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;

          .must-topic {
            font-weight: 700;
            font-size: 1.25rem;
          }

          .su {
            color: #f09819;
            margin-left: 10rpx;
            font-weight: 700;
            border-radius: 1px;
          }
        }

        .go-topic-box {
          width: 100%;
          display: flex;
          align-items: center;
          background-color: #f7f7f7;
          border-radius: 20rpx;
          box-sizing: border-box;
          padding: 10rpx;
          margin-top: 20rpx;

          .go-item {
            width: 50%;

            .text {
              margin-left: 20rpx;
              font-size: 0.85rem;
            }
          }

          .go-share {
            width: 300rpx;
            height: 70rpx;
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10rpx;
          }
        }
      }
    }
  }

  .card-list {
    width: 100%;
    height: 800rpx;
  }

  .item-context {
    box-sizing: border-box;
    padding: 0 $lr-padding;
  }
}
</style>
